{% extends "base.html" %}

{% block title %}外部系统 - 惠农平台{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="external-system-card">
            <div class="card">
                <div class="card-header">
                    <h3><i class="fas fa-external-link-alt me-2"></i>外部系统跳转</h3>
                </div>
                <div class="card-body">
                    <!-- 系统状态检查 -->
                    <div class="system-info">
                        <h3><i class="fas fa-server me-2"></i>系统状态</h3>
                        <div id="systemStatus">
                            <div class="text-center">
                                <div class="loading"></div>
                                <p class="mt-2">正在检查系统状态...</p>
                            </div>
                        </div>
                        <button type="button" class="btn btn-primary" id="checkSystemBtn">
                            <i class="fas fa-sync-alt me-1"></i>重新检查
                        </button>
                    </div>

                    <!-- 跳转选项 -->
                    <div class="system-info">
                        <h3><i class="fas fa-rocket me-2"></i>跳转选项</h3>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <button type="button" class="btn btn-success w-100" id="jumpBtn">
                                    <i class="fas fa-external-link-alt me-2"></i>新窗口打开外部系统
                                </button>
                                <small class="text-muted d-block mt-1">在新标签页中打开外部系统</small>
                            </div>
                            <div class="col-md-6 mb-3">
                                <button type="button" class="btn btn-warning w-100" id="sameWindowBtn">
                                    <i class="fas fa-arrow-right me-2"></i>当前窗口跳转
                                </button>
                                <small class="text-muted d-block mt-1">在当前窗口中跳转到外部系统</small>
                            </div>
                        </div>
                    </div>

                    <!-- 当前地址信息 -->
                    <div class="system-info">
                        <h3><i class="fas fa-link me-2"></i>当前系统地址</h3>
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" id="currentUrl" readonly value="{{ request.url_root.rstrip('/') }}">
                            <button class="btn btn-outline-primary" type="button" id="copyUrlBtn">
                                <i class="fas fa-copy me-1"></i>复制地址
                            </button>
                        </div>
                        <p class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            您可以将此地址提供给外部系统，用于跳转回本系统。
                        </p>
                    </div>

                    <!-- 集成指南 -->
                    <div class="system-info">
                        <h3><i class="fas fa-book me-2"></i>集成指南</h3>
                        <div class="accordion" id="integrationGuide">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingOne">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                                        <i class="fas fa-code me-2"></i>如何在外部系统中添加跳转按钮
                                    </button>
                                </h2>
                                <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#integrationGuide">
                                    <div class="accordion-body">
                                        <h6>HTML代码示例：</h6>
                                        <pre><code>&lt;button onclick="window.open('{{ request.url_root.rstrip('/') }}', '_blank')"&gt;
    跳转到惠农平台
&lt;/button&gt;</code></pre>
                                        
                                        <h6>JavaScript代码示例：</h6>
                                        <pre><code>function goToAgriculturalSystem() {
    window.open('{{ request.url_root.rstrip('/') }}', '_blank');
}</code></pre>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingTwo">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
                                        <i class="fas fa-cogs me-2"></i>API接口说明
                                    </button>
                                </h2>
                                <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#integrationGuide">
                                    <div class="accordion-body">
                                        <h6>系统状态检查接口：</h6>
                                        <pre><code>GET {{ request.url_root.rstrip('/') }}/api/check_external_system</code></pre>
                                        
                                        <h6>数据搜索接口：</h6>
                                        <pre><code>GET {{ request.url_root.rstrip('/') }}/api/data/search?page=1&size=20</code></pre>
                                        
                                        <h6>价格分布接口：</h6>
                                        <pre><code>GET {{ request.url_root.rstrip('/') }}/api/price_distribution?product=苹果</code></pre>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingThree">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
                                        <i class="fas fa-shield-alt me-2"></i>安全注意事项
                                    </button>
                                </h2>
                                <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#integrationGuide">
                                    <div class="accordion-body">
                                        <ul>
                                            <li>确保外部系统使用HTTPS协议</li>
                                            <li>建议添加适当的访问控制和身份验证</li>
                                            <li>定期检查系统状态和连接安全性</li>
                                            <li>避免在URL中传递敏感信息</li>
                                            <li>建议使用POST方法进行数据传输</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 联系信息 -->
                    <div class="system-info">
                        <h3><i class="fas fa-envelope me-2"></i>技术支持</h3>
                        <div class="row">
                            <div class="col-md-6">
                                <h6><i class="fas fa-user me-2"></i>联系方式</h6>
                                <ul class="list-unstyled">
                                    <li><i class="fas fa-envelope me-2"></i>邮箱：support@agricultural.com</li>
                                    <li><i class="fas fa-phone me-2"></i>电话：400-123-4567</li>
                                    <li><i class="fas fa-clock me-2"></i>工作时间：周一至周五 9:00-18:00</li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h6><i class="fas fa-file-alt me-2"></i>相关文档</h6>
                                <ul class="list-unstyled">
                                    <li><i class="fas fa-download me-2"></i><a href="#" class="text-decoration-none">API接口文档</a></li>
                                    <li><i class="fas fa-download me-2"></i><a href="#" class="text-decoration-none">集成开发指南</a></li>
                                    <li><i class="fas fa-download me-2"></i><a href="#" class="text-decoration-none">常见问题解答</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 